<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的模型" name="first" style="margin-top: 1%;height: 100%">
                <el-container>
                    <el-header style="height: 50px;padding-top: 10px;padding-right: 7%">
                        <el-button @click="refresh" icon="el-icon-refresh" circle type="primary"
                                   style="float: right;"></el-button>

                        <el-button @click.prevent="register" icon="el-icon-circle-plus-outline" type="primary" circle
                                   style="float: right;margin-right: 1%"></el-button>
                    </el-header>
                    <el-main style="margin-left: 4%;min-height:700px">
                        <el-col :xs="24" :sm="12" :md="8" :lg="4" v-for="(card, index) in cardsData" :key="index"
                                style="margin: 20px;">
                            <modelCard :card="card"></modelCard>
                        </el-col>
                    </el-main>
                    <el-footer style="text-align: center">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageNo"
                                :page-sizes="[8, 16, 24, 32]"
                                :page-size="pageSize"
                                background
                                layout="prev, pager, next"
                                :total=this.totalCount>
                        </el-pagination>
                    </el-footer>
                </el-container>
            </el-tab-pane>

            <el-tab-pane label="新建分析" name="second" style="height: 100%">
                <el-container style="width: 80%;margin-left: 11%;margin-top: 1.5%;height: 80%;">
                    <el-header>
                        <el-steps :active="active" finish-status="success" style="margin-top: 15px">
                            <el-step title="选择模型" icon="el-icon-edit"></el-step>
                            <el-step title="填写模型参数" icon="el-icon-edit"></el-step>
                            <el-step title="配置资源参数" icon="el-icon-edit"></el-step>
                        </el-steps>
                    </el-header>
                    <el-main style="min-height:620px;margin-top: 50px;width: 90%;padding: 0 20px">
                        <div v-show="step1" style="margin-left: 5%">
                            <el-container>
                                <el-main style="min-height: 580px;padding: 0 20px;">
                                    <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(card, index) in cardsData"
                                            :key="index"
                                            style="margin: 20px;">
                                        <modelCard :card="card" v-on:next="next"></modelCard>
                                    </el-col>
                                </el-main>
                                <el-footer style="text-align: center;padding: 0;height: 30px">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="pageNo_step2"
                                            :page-sizes="[6, 12, 18, 24]"
                                            :page-size="pageSize_step2"
                                            layout="prev, pager, next"
                                            :total=this.totalCount>
                                    </el-pagination>
                                </el-footer>
                            </el-container>
                        </div>
                        <div v-show="step2" style="margin-top: 3%;height:500px">
                            <modelForm :formData="formData"></modelForm>
                        </div>
                        <div v-show="step3" style="margin-top: 3%;height:500px">

                        </div>
                    </el-main>
                    <el-footer style="height: 50px">
                        <div style="float:right">
                            <el-button v-if="this.active===1||this.active===2" @click="previous">上一步</el-button>
                            <el-button v-if="this.active===0||this.active===1" @click="next">下一步</el-button>
                            <el-button v-if="this.active===2" @click="confirm">确定</el-button>
                            <el-button v-if="this.active===1" @click="cancel">重置</el-button>
                        </div>
                    </el-footer>
                </el-container>
            </el-tab-pane>

            <el-tab-pane label="任务管理" name="third">
                    <el-table :data="taskTableData" style="width: 70%;margin-left:15%;margin-top: 3%;">
                        <el-table-column
                                prop="datasetname"
                                label="分析名称"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                prop="successnumb"
                                label="创建时间"
                                width="150"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="successnumb"
                                label="分析进度"
                                width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                                prop="successnumb"
                                label="完成时间"
                                width="150"
                                align="center">
                        </el-table-column>
                        <el-table-column width="fit-content" align="center " label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        :disabled="scope.row.logDisabled"
                                        title="结果查看"
                                        icon="el-icon-s-order"
                                        @click=""
                                        type="text">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-tab-pane>
        </el-tabs>
        <register-dialog v-on:refresh="refresh"></register-dialog>
        <modelInfoDialog></modelInfoDialog>
    </div>
</template>
<script>

    import registerDialog from "./registerDialog.vue"
    import modelInfoDialog from '../space/modelInfoDialog'
    import modelCard from '../space/modelCard'
    import modelForm from '../space/modelForm'

    export default {
        components: {
            modelCard,
            registerDialog,
            modelInfoDialog,
            modelForm
        },
        data() {
            return {
                activeName: 'first',
                tableData: [],
                fileList: [],
                taskTableData: [],
                active: 0,
                step1: true,
                step2: false,
                step3: false,
                totalCount: 0,
                pageSize: 8,
                pageNo: 1,
                pageSize_step2: 6,
                pageNo_step2: 1,
                cardsData: {},
                formData: null,
                modelId: 0
            };
        },
        watched: {},
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
                if (tab.name === 'second') {
                    this.$Bus.$emit('modelSelect', true);
                } else {
                    this.$Bus.$emit('modelSelect', false);
                }
            },
            cancel() {
                this.spatialVisible = false;
                this.active = 0;
                this.value = '';
                this.step1 = true;
                this.step2 = false;
                this.$refs.modelForm.reset();
            },
            register() {
                let registerVisible = {
                    visible: true,
                };
                this.$Bus.$emit('registerVisible', registerVisible);
            },
            refresh() {
                this.cardsData = null;
                this.getModel();
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.pageNo = val;
            },
            getModel() {
                let that = this;
                let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.data.code === 200) {
                        that.cardsData = res.data.body.result;
                        console.log(typeof(that.cardsData));
                        that.totalCount = res.data.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.data.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '模型获取失败！'
                    })
                })
            },

            previous() {
                if (this.active === 1) {
                    this.active = 0;
                    this.step1 = true;
                    this.step2 = false;
                    this.step3 = false;
                } else if (this.active === 2) {
                    this.active = 1;
                    this.step1 = false;
                    this.step2 = true;
                    this.step3 = false;
                }
            },
            next(id) {
                let that = this;
                if (this.active === 0) {
                    this.active++;
                    this.step1 = false;
                    this.step2 = true;
                    this.step3 = false;
                    //获取表单信息
                    let url = 'http://192.168.1.5:9000/dbfg/parallel/get/' + id;
                    this.$axios.get(url).then(res => {
                        if (res.data.code === 200) {
                            that.formData = JSON.parse(res.data.body.parameters);
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.data.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message({
                            type: 'warning',
                            message: '模型信息获取失败！'
                        })
                    })
                } else if (this.active === 1) {
                    this.active++;
                    this.step1 = false;
                    this.step2 = false;
                    this.step3 = true;
                }
            },

            confirm() {

                // 确定开始分析：
                this.$message({
                    type: 'succes',
                    message: '模型配置成功，请到任务管理中查看运行进度'
                });
                this.analyzeVisible = false;
            }
        },
        created() {
            this.getModel();
        }
    };

</script>
<style>


    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-col-8 {
        width: 15%;
    }

    .el-tabs__header {
        margin: 0 0;
    }
</style>